<template>
  <section class="todoapp">
    <Hmheader @addList="addList"></Hmheader>
    <Hmmain
      :list="renderList"
      @delList="delList"
      @isALL="isALL"
      @changeFlag="changeFlag"
    ></Hmmain>
    <Hmfoot
      :sum="sum"
      :isShowClear="isShowClear"
      @clear="clear"
      :type="type"
      @changeType="changeType"
    ></Hmfoot>
  </section>
</template>

<script>
import Hmmain from './components/Hm-mian.vue'
import Hmfoot from './components/Hm-foot.vue'
import Hmheader from './components/Hm-header.vue'
export default {
  components: {
    Hmmain,
    Hmfoot,
    Hmheader,
  },
  data() {
    return {
      list: [
        { id: 1, value: '吃饭', flag: true },
        { id: 2, value: '睡觉', flag: false },
        { id: 3, value: '吃饭', flag: false },
      ],
      type: 'all',
    }
  },
  methods: {

    //添加
    addList(value) {
      this.list = [{ id: +new Date(), value: value, flag: false }, ...this.list]
    },


    //删除
    delList(id) {
      this.list = this.list.filter((item) => item.id !== id)
    },


    //清除已完成
    clear() {
      this.list = this.list.filter((item) => !item.flag)
    },


    //切换
    changeType(type) {
      this.type = type
    },


    //全选
    isALL(newVal) {
      this.list.forEach((item) => (item.flag = newVal))
    },


    //改变选中状态
    changeFlag(flag, id) {
      this.list.forEach((item) => {
        if (item.id === id) {
          item.flag = flag
        }
      })
    },
  },
  computed: {


    //剩余未完成数量
    sum() {
      return this.list.filter((item) => item.flag === false).length
    },


    //显示按钮
    isShowClear() {
      return this.list.some((item) => item.flag)
    },


    //底部切换
    renderList() {
      switch (this.type) {
        case 'all':
          return this.list
        case 'active':
          return this.list.filter((item) => !item.flag)
        case 'completed':
          return this.list.filter((item) => item.flag)
        default:
          return this.list
      }
    },
  },
}
</script>

<style></style>
